<template>
  <el-menu default-active="2"
           :collapse="isCollapse" collapse-transition
           class="el-menu-vertical-demo"
           background-color="#334157"
           active-text-color="#ffd04b"
           text-color="#fff"
           unique-opened
           :router="true"
           :default-active="$route.path">
    <div class="logobox">
      <img class="logoimg" src="@/assets/images/logo.png" alt="">
    </div>
    <el-menu-item :index=" '/charts' ">
      <i class="el-icon-menu"></i>
      <span slot="title">首页</span>
    </el-menu-item>
    <el-submenu index="2">
      <template slot="title">
        <i class="el-icon-user"></i>
        <span>用户管理</span>
      </template>
      <el-menu-item-group>
        <el-menu-item :index=" '/user/list' ">
          <i class="el-icon-user-solid"></i>
          <span>用户列表</span>
        </el-menu-item>
        <el-menu-item :index=" '/role/list' ">
          <i class="el-icon-coin"></i>
          <span>角色列表</span>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>

<!--    <el-submenu index="3">
      <template slot="title">
        <i class="el-icon-place"></i>
        <span>组织管理</span>
      </template>
      <el-menu-item-group>
        <el-menu-item :index=" '/user/organization' ">
          <i class="el-icon-place"></i>
          <span>组织列表</span>
        </el-menu-item>
        <el-menu-item :index=" '/organization/user' ">
          <i class="el-icon-user-solid"></i>
          <span>组织用户</span>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>-->

    <el-submenu index="4">
      <template slot="title">
        <i class="el-icon-reading"></i>
        <span>文章管理</span>
      </template>
      <el-menu-item-group>
        <el-menu-item :index=" '/article/list' ">
          <i class="el-icon-tickets"></i>
          <span>文章列表</span>
        </el-menu-item>
        <el-menu-item :index=" '/category/list' ">
          <i class="el-icon-folder"></i>
          <span>分类列表</span>
        </el-menu-item>
        <el-menu-item :index=" '/label/list' ">
          <i class="el-icon-collection-tag"></i>
          <span>标签列表</span>
        </el-menu-item>
<!--        <el-menu-item :index=" '/article/addBlog' ">
          <i class="el-icon-folder-add"></i>
          <span>发表文章</span>
        </el-menu-item>-->
      </el-menu-item-group>
    </el-submenu>

    <el-submenu index="5">
      <template slot="title">
        <i class="el-icon-document-checked"></i>
        <span>审批管理</span>
      </template>
      <el-menu-item-group>
        <el-menu-item :index=" '/approve/articleApprove' " >
          <i class="el-icon-reading"></i>
          <span>文章审批</span>
        </el-menu-item>
        <el-menu-item :index=" '/approve/columnApprove' " >
          <i class="el-icon-reading"></i>
          <span>专栏审批</span>
        </el-menu-item>
<!--        <el-submenu index="1-4">
          <span slot="title">
            <i class="el-icon-place"></i>
            <span>组织审批</span></span>
          <el-menu-item :index="'/approve/organizationApprove'">
            <i class="el-icon-check"></i>
            <span>申请创建组织</span>
          </el-menu-item>
          <el-menu-item :index="'/approve/userApprove'">
            <i class="el-icon-finished"></i>
            <span>申请加入组织</span>
          </el-menu-item>
        </el-submenu>-->
      </el-menu-item-group>
    </el-submenu>

    <el-submenu index="6">
      <template slot="title">
        <i class="el-icon-setting"></i>
        <span>系统管理</span>
      </template>
      <el-menu-item-group>
        <el-menu-item :index=" '/system/userCenter' ">
          <i class="el-icon-user"></i>
          <span>个人中心</span>
        </el-menu-item>
        <el-menu-item :index=" '/system/systemConfig' ">
          <i class="el-icon-s-tools"></i>
          <span>系统配置</span>
        </el-menu-item>
        <el-menu-item :index=" '/system/log' ">
          <i class="el-icon-document"></i>
          <span>日志管理</span>
        </el-menu-item>
        <el-menu-item :index=" '/system/barrage' ">
          <i class="el-icon-s-comment"></i>
          <span>留言管理</span>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>



  </el-menu>
</template>
<script>
export default {
  name: 'leftnav',
  data() {
    return {
      isCollapse: false,
    }
  },

  created() {
    // 监听
    this.$root.Bus.$on('toggle', value => {
      this.isCollapse = !value
    });
  }
}
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;
  min-height: 400px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  border: none;
  text-align: left;
}
.el-menu-item-group__title {
  padding: 0px;
}
.el-menu-bg {
  background-color: #1f2d3d !important;
}
.el-menu {
  border: none;
}
.logobox {
  height: 60px;
  line-height: 40px;
  color: #9d9d9d;
  font-size: 20px;
  text-align: center;
  padding: 20px 0px;
}
.logoimg {
  height: 40px;
}
</style>
